import React, { useEffect } from 'react'
import { Table, Switch, Space } from 'antd';
import './All_articles.less';
import { useSelector, useDispatch, IRouteComponentProps } from 'umi'

const columns = [
    {
        title: '标题',
        width: 130,
        dataIndex: 'title',
        align: 'center',
        fixed: 'left',
        type: 'checkbox',
    },
    {
        title: '状态',
        width: 100,
        align: 'center',
        render: (row:any) => {
            if (row.status == "publish") {
                return <span>发布</span>
            } else {
                return <span>草稿</span>
            }
        }
    },
    {
        title: '分类',
        width: 150,
        align: 'center',
        render: (row:any) => {
            return <span>{row.category && row.category.label}</span>
        }
    },
    {
        title: '标签',
        width: 150,
        align: 'center',
        render: (row:any) => {
            return <span>{row.tags[0] && row.tags[0].label}</span>
        }
    },
    {
        title: '阅读量',
        dataIndex: 'views',
        width: 150,
        align: 'center',
        style: 'background-color: rgb(82, 196, 26);border-radius: 10px;'
    },
    {
        title: '喜欢数',
        dataIndex: 'likes',
        width: 150,
        align: 'center',
        style: 'background: #ff4d4f;border-radius: 10px;'
    },
    {
        title: '发布时间',
        width: 150,
        align: 'center',
        render: (row:any) => {
            return <span>{row.category && row.category.createAt}</span>
        }
    },
    {
        title: '操作',
        fixed: 'right',
        width: 300,
        align: 'center',
        render: () => {
            return <div className='right'>
                <span>编辑</span>
                <span>首焦推荐</span>
                <span>查看访问</span>
                <span>删除</span>
            </div>
        },
    }
];
const data = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
            {
                key: 11,
                name: 'John Brown',
                age: 42,
                address: 'New York No. 2 Lake Park',
            },
            {
                key: 12,
                name: 'John Brown jr.',
                age: 30,
                address: 'New York No. 3 Lake Park',
                children: [
                    {
                        key: 121,
                        name: 'Jimmy Brown',
                        age: 16,
                        address: 'New York No. 3 Lake Park',
                    },
                ],
            },
            {
                key: 13,
                name: 'Jim Green sr.',
                age: 72,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        key: 131,
                        name: 'Jim Green',
                        age: 42,
                        address: 'London No. 2 Lake Park',
                        children: [
                            {
                                key: 1311,
                                name: 'Jim Green jr.',
                                age: 25,
                                address: 'London No. 3 Lake Park',
                            },
                            {
                                key: 1312,
                                name: 'Jimmy Green sr.',
                                age: 18,
                                address: 'London No. 4 Lake Park',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
];

const rowSelection = {
    onChange: (selectedRowKeys:any, selectedRows:any) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record:any, selected:any, selectedRows:any) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected:any, selectedRows:any, changeRows:any) => {
        console.log(selected, selectedRows, changeRows);
    },
};



const All_articles: React.FC<IRouteComponentProps> = () => {
    const [checkStrictly, setCheckStrictly] = React.useState(false);
    const state = useSelector((state:{articles_all:any}) => state.articles_all)
    console.log(state);
    const dispatch = useDispatch()
    console.log(state.articles_allList1, "articles_all...");

    useEffect(() => {
        dispatch({
            type: "articles_all/query"
        })

    }, [])
    return (
        <div className='content'>
            <div className='top_nav'>
                <div>
                    <span>标题:<input type="text" placeholder='请输入标题' /></span>
                    <span>状态:<select></select></span>
                    <span>分类:<select></select></span>
                </div>
                <div>
                    <button>重置</button>
                    <button>提交</button>
                </div>
            </div>

            <div className='table'>
                <>
                    {/* <Space align="center" style={{ marginBottom: 16 }}>
                        CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />
                    </Space> */}
                    <Table
                        columns={columns as any}
                        rowSelection={{ ...rowSelection, checkStrictly }}
                        dataSource={state.articles_allList1}
                        scroll={{ x: 1400, y: 380 }}
                    />
                </>
                {/* <Table columns={columns as any} key='index' dataSource={state.articles_allList} scroll={{ x: 1400, y: 380 }} /> */}
            </div>
        </div>
    )
}


export default All_articles;